import Taro , { Component } from '@tarojs/taro'
import { View , Image , Text , Button} from '@tarojs/components'

import browse_icon from '../../image/ic_browse.png'
import priase_icon from '../../image/ic_praise.png'
import share_icon from '../../image/ic_share.png'
import hasPraisedIcon from '../../image/ic_praise_red.png'

import {base_url} from "../../network/config";

import DataManager from '../../utils/DataManager.js'

import './itemBottomInfo.scss'


export default class itemBottomInfo extends Component {

  defaultProps = {
    browseCount: 0,
    praiseCount: 0,
    shareCount:0,
    hasPraise: false,
    itemId: Number,
    itemType:Number
  }

  constructor(){
    super(...arguments)
    this.state={
      praiseCount : this.props.praiseCount,
      hasPraise : this.props.hasPraise,
    }
  }

  onShareAppMessage(option){
    console.log('     options ----------' + JSON.stringify(option))
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      itemId:nextProps.itemId,
      itemType:nextProps.itemType
    })
  }

  onPraiseChange = (e) =>{
    e.stopPropagation();
    if (!this.state.hasPraise){
      let _this = this;

      console.log('praise------   ' + _this.props.itemId + '     ' + _this.props.itemType)

      Taro.request({
        url:base_url + 'rest/user/praise/save',
        data:{
          token:DataManager.getToken(),
          platform:'android_c',
          weixinId:DataManager.getWeiXinId(),
          loginChannel:'wechat',
          appId:'KC876D98B30UA40CJSNHI689FB33SDW',
          digest : 'dda484557c12febe48139d8f44051c13',
          id:_this.props.itemId,
          type:_this.props.itemType
        },
        header: { 'content-type': 'application/x-www-form-urlencoded' },
        method: 'POST',
        success(res2) {
          console.log('点赞结果==========' + JSON.stringify(res2))
          let pCount = _this.state.praiseCount + 1;
          _this.setState({
            hasPraise: true,
            praiseCount : pCount
          })
        }
      })
    }
  }

  onShareClick = (e) =>{
    e.stopPropagation();
  }

  render() {

    let praiseIcon = this.state.hasPraise ? hasPraisedIcon : priase_icon;
    let hasPraisedStyle = this.state.hasPraise ? 'color:red' : 'color:#4395f5';
    let hasPraisedHintStyle = this.state.hasPraise ? 'color:red' : 'color:#999999';


    return(
      <View className='bottom-info-container'>
        <View className='bottom-info-content-container'>
          <View className='bottom-info-single-container'>
            <Image className='bottom-info-icon' src={browse_icon} />
            <Text className='bottom-info-value'>{this.props.browseCount}</Text>
            <Text className='bottom-info-hint'>人浏览</Text>
          </View>
          <View className='bottom-info-single-container' onClick={this.onPraiseChange.bind(this)}>
            <Image className='bottom-info-icon' src={praiseIcon} />
            <Text className='bottom-praise-value' style={hasPraisedStyle}>{this.state.praiseCount}</Text>
            <Text className='bottom-praise-hint' style={hasPraisedHintStyle}>人点赞</Text>
          </View>
          <View className='bottom-info-single-container'>
            <Image className='bottom-info-icon' src={share_icon} />
            <Text className='bottom-info-value'>{this.props.shareCount}</Text>
            <Text className='bottom-info-hint'>人扩散</Text>
            <Button
              className='bottom-share-button'
              openType='share'
              style='width:20%;height:55px;position: fixed;z-index: 1000000;background-color: transparent;'
              data-itemId={this.props.itemId}
              data-itemType={this.props.itemType}
              onClick={this.onShareClick.bind(this)}
            />
          </View>
        </View>
      </View>
    )
  }

}

